<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath %>">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>用户列表</title>
    <link rel="stylesheet" href="/resources/lib/layui-v2.6.3/css/layui.css"
          media="all">
    <script src="/resources/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="/resources/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <script type="text/javascript">
        layui.use(['table', 'layer', 'jquery', 'form','wangEditor'], function () {
            let table = layui.table;
            let layer = layui.layer;
            let $ = layui.jquery;
            let form = layui.form;
            let wangEditor = layui.wangEditor;

            var E = window.wangEditor;
            var content = new E('#content');

            content.create();

            //表单渲染
            let noticeTab = table.render({
                elem: "#noticeTable",
                url: "/notice/list.do",
                title: "用戶列表",
                page: true,
                cols: [ [
                    {field: "id", title: "ID", align: "center"},
                    {field: "title", title: "标题", align: "center"},
                    {field: "content", title: "内容", align: "center"},
                    {field: "author", title: "发布者", align: "center"},
                    {field: "createTime", title: "创建时间", align: "center"},
                    {title: "操作", align: "center", toolbar: "#noticeTableBar", width: 160}
                ] ],
                toolbar: "#noticeTableToolbar"
            })

            $("#resetSearch").click(function () {
                noticeTab.reload({
                    where:null
                });
            })

            //查询按钮绑定事件
            form.on("submit(doSearch)", function (obj) {
                let data = obj.field;
                noticeTab.reload({
                    where: data
                })
                return false;
            })

            //添加顶部按钮绑定事件
            table.on("toolbar(noticeTable)", function (obj) {
                let event = obj.event;
                switch (event) {
                    case "add":
                        openAddLayer();
                        break
                }

            })
            //添加行按钮绑定事件
            table.on("tool(noticeTable)", function (obj) {
                let event = obj.event;
                switch (event) {
                    case "del":
                        layer.confirm("确认删除["+obj.data.title+"]公告吗?"
                            ,{icon:3,title:"提示"}, function () {
                                $.post("/notice/delNotice.do",{id:obj.data.id}, function (res) {
                                    layer.msg(res.msg);
                                    if (res.code == 200) {
                                        noticeTab.reload();
                                    }
                                })
                            })
                        break;
                    case "update":
                        openUpdateLayer(obj.data)
                }
                return false;
            })


            let url;
            let mainIndex;
            function openAddLayer() {
                mainIndex = layer.open({
                    type: 1,
                    title: '添加公告',
                    content: $("#addOrUpdateFrm"),
                    closeBtn: 1,
                    area: ['900px', '600px'],
                    success: function () {
                        $("#resetBtn").click()
                        $("#hiddenId").val("")
                        content.txt.html("");
                        url = "/notice/addNotice.do"
                    }
                })
            }
            function openUpdateLayer(data) {
                mainIndex = layer.open({
                    type: 1,
                    title: '修改公告',
                    content: $("#addOrUpdateFrm"),
                    closeBtn: 1,
                    area: ['900px', '600px'],
                    success: function () {
                        form.val("dataForm", data)
                        content.txt.html(data.content);
                        url = "/notice/updateNotice.do"
                    }
                })
            }
            //监听添加与修改提交事件
            form.on("submit(doSubmit)", function (obj) {
                let data = obj.field
                let temp = content.txt.html();
                data.content=temp
                console.log(data)
                $.post(url, data, function (res) {
                    layer.msg(res.msg)
                    if (res.code == 200) {
                        layer.close(mainIndex);
                        noticeTab.reload();
                    }
                });
                return false;
            })
        })
    </script>
</head>
<body>

<blockquote class="layui-elem-quote">
    <form class="layui-form" id="searchFrm" lay-filter="searchFrm">
        <div class="layui-form-item" >
            <div class="layui-inline" >
                <label class="layui-form-label">标题:</label>
                <div class="layui-input-inline">
                    <input type="text" name="title" placeholder="请输入标题" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <button type="button"  class="layui-btn" lay-submit id="doSearch" lay-filter="doSearch">
                    <i class="layui-icon layui-icon-search"></i>
                    查询
                </button>
                <button id="resetSearch" type="reset"  class="layui-btn layui-btn-danger">
                    <i class="layui-icon layui-icon-refresh-3"></i>
                    重置
                </button>
            </div>
        </div>
    </form>
</blockquote>

<div id="addOrUpdateFrm" style="display: none;margin-right: 5px">
    <form class="layui-form " id="dataForm" lay-filter="dataForm">
        <div class="layui-form-item" style="margin-top: 10px">
                <label class="layui-form-label">标题:</label>
                <div class="layui-input-block">
                    <input type="hidden" name="id" id="hiddenId">
                    <input type="text" lay-verify="required" name="title" placeholder="请输入标题" class="layui-input">
                </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">内容:</label>
            <div class="layui-input-block">
                <div id="content"></div>
            </div>
        </div>
        <div class="layui-input-item" style="text-align: center;margin-top: 20px">
            <button type="button" class="layui-btn layui-btn-lg" lay-submit id="doSubmit" lay-filter="doSubmit" >
                <i class="layui-icon layui-icon-release"></i>
                提交
            </button>
            <button type="reset" id="resetBtn" class="layui-btn layui-btn-lg layui-btn-warm">
                <i class="layui-icon layui-icon-refresh-3"></i>
                重置
            </button>
        </div>
    </form>
</div>
<div>
    <table id="noticeTable" class="layui-hide" lay-filter="noticeTable"></table>
    <script type="text/html" id="noticeTableToolbar">
        <button class="layui-btn layui-btn-sm layui-btn-primary layui-border-green" lay-event="add">
            <i class="layui-icon layui-icon-addition"></i>    添加
        </button>
    </script>
    <script type="text/html" id="noticeTableBar">
        <a class="layui-btn layui-btn-xs layui-btn-primary layui-border-blue"  lay-event="update">
            <i class="layui-icon layui-icon-edit"></i>编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-primary layui-border-red" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>删除</a>
    </script>
</div>

</body>
</html>